<template>
  <div class="area-table">
    <div class="area-table-title-row">
      <span class="table-title">{{ title }}</span>
      <div v-if="!disabled">
        <!--        <el-button type="primary">预览</el-button>-->
        <el-button type="primary" @click="handleAdd()">新增</el-button>
      </div>
    </div>
    <el-table :data="tableData" class="project-application-table">
      <el-table-column label="序号" prop="index" :width="80">
        <template v-slot="{$index}">
          {{ $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="区域名称" show-overflow-tooltip prop="areaName"/>
      <el-table-column label="施工内容" show-overflow-tooltip prop="constructionContent"/>
      <el-table-column label="特种作业内容" show-overflow-tooltip prop="specialJobContent"/>
      <el-table-column label="操作" width="120">
        <template v-slot="{row}">
          <template v-if="pageType === ProjectFormType.ADD || pageType === ProjectFormType.EDIT">
            <el-button type="text" @click="handleEdit(row)">编辑</el-button>
            <el-popconfirm title="确定要删除吗？" @confirm="() =>handleDelete(row)">
              <template #reference>
                <el-button type="text">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
          <el-button v-else type="text" @click="handleView(row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <AddMapArea ref="addMapAreaRef"/> -->
    <AddMapArea ref="addMapAreaRef" :location="location"/>
  </div>
</template>

<script>
// import AddMapArea from "@/views/construction/project-application/componens/AddMapArea";
import AddMapArea from "@/views/construction/project-application/componens/AddMapArea";
import {dicFormatter} from "@/views/construction/project-application/projectUtil";
import {ProjectFormType} from "@/views/construction/project-daily/projectUtil";

export default {
  name: "AreaTable",
  components: {AddMapArea},
  inject: ['pageType'],
  props: {
    title: {
      type: String
    },
    tableData: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
    },
    location: {
      type: String,
    }
  },
  data() {
    return {
      ProjectFormType
    }
  },
  methods: {
    specialTypeFormatter(row) {
      if (!row.specialJobContent || !row.specialJobContent.length) return
      return row.specialJobContent.map(val => this.options.projectWorkTypeOptions(val)).join()
    },
    handleAdd() {
      this.$refs.addMapAreaRef.open({
        resolve: (item) => {
          if (item) {
            this.tableData.push(item)
          }
        }
      })
    },
    handleEdit(row) {
      this.$refs.addMapAreaRef.open({
        row,
        resolve: (item) => {
          Object.assign(row, item)
        }
      })
    },
    handleView(row) {
      this.$refs.addMapAreaRef.open({
        row,
      })
    },
    handleDelete(row) {
      let index = this.tableData.findIndex(item => item === row)
      this.tableData.splice(index, 1)
    },
  }
}
</script>

<style lang="less" scoped>
.area-table {
  padding-left: 50px;
  margin-bottom: 20px;

  .area-table-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

    .table-title {
      font-size: 14px;
    }
  }
}
</style>
